import Vue from "vue";
import App from "./App.vue";
//引入vue-router
import router from "./router";
//引入vuex
import store from "./store";
//引入侧边栏插件
import subMenu from "qf-sub-menu"
//引入进度条
import nprogress from "nprogress";
//引入进度条css
import 'nprogress/nprogress.css'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//必须在elm原生css后面引入自定义css不然会覆盖
import elbasecss from '../src/assets/css/el-reset.css'
import basecss from "../src/assets/css/base.css"
Vue.use(ElementUI);
Vue.use(subMenu);

//自定义全局鉴权指令
Vue.directive('has', {
  inserted(el, binding) {
    //从本地取出按钮权限对比
    let permissionbtns = localStorage.getItem('permission') || '[]'
    permissionbtns = JSON.parse(permissionbtns)

    //看响应中permission是否包含传入的value字段
    //如果有则具有该按钮权限
    if (!permissionbtns.includes(binding.value)) {
      //事先保存原来元素上的类名以防止覆盖
      let classname = el.className
      //启用elm-ui的按钮禁用样式
      el.className = classname + " " + 'is-disabled'
      //真正的元素上禁用按钮
      el.disabled = true
    }
  }
})
//全局配置路由守卫作用是防止未进行登录前就直接访问其他页面
router.beforeEach((to, from, next) => {
  //前置路由钩子开始时启动进度条
  nprogress.start()
  //to即将进入的路由
  //from即将离开的路由
  //next放行
  //判断本地有没有token,如果存在就放行，没有则是跳转到登录页面
  let token = localStorage.getItem('login-token')
  if (token) { //已经登入
    //判断是否为空数组，是空数组就要获取用户侧边栏菜单
    if (store.state.sideMenu.length == 0) {
      store.dispatch('GET_MENULIST').then(() => {
        next({
          path: to.path
        }) //如果这个时候直接next，那么计算的侧边栏路由还没添加进项目路由配置
        //所以我们需要再跳转一次确保侧边栏路由添加项目配置中
      })
    } else {
      next();
    }

  } else {
    //没有token就看是不是访问的是登录页面
    if (to.path !== '/login') {
      //访问的不是登录页面直接跳转到登录页
      next({
        path: '/login'
      });
    } else {
      //访问的登录页面直接放行
      next()
    }
  }
})

//全局后置钩子处理面包屑数据
router.afterEach((to, from) => {
  //进入后关闭进度条
  
  nprogress.done()
  //将面包屑数据重新赋值给新数组
  let match = [...to.matched] //一个数组，包含当前路由的所有嵌套路径片段的路由记录(to.matched)
  //因为第一条数据为空所以删除掉
  match.splice(0, 1)
  //然后将触发vuex中mutations方法
  store.commit('SET_BREADCRUMBS', match)
})
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");